<template>
  <div>
    <div v-if="isedit">
      <input type="text" :ref="ref" :value="val" />
      <a-button type="primary" size="small" @click="save">保存</a-button>
      <a-button type="danger" size="small" @click="isedit=false">取消</a-button>
    </div>
    <div v-else @dblclick="open">{{val}}</div>
  </div>
</template>

<script>
export default {
  props: ["k", "v"],
  watch: {
    v() {
      this.val = this.v;
    },
  },
  data() {
    return {
      name: "editablefield",
      isedit: false,
      ref: this.k,
      val: this.v,
    };
  },
  methods: {
    save() {
      this.val = this.$refs[this.ref].value;
      this.isedit = false;
      this.$emit("change", {
        key: this.ref,
        val: this.val,
      });
    },
    open() {
      this.$parent.$children.forEach((r) => {
        if (r.name === "editablefield") {
          r.isedit = false;
        }
      });
      this.isedit = true;
    },
  },
};
</script>

<style scoped lang='scss'>
input {
  border: 1px solid #cccccc;
  border-radius: 3px;
  outline: none;
  text-indent: 5px;
}
button {
  margin: 0 5px;
}
</style> 